.courseCatalog {
  margin-top: 10px;

  &.mobile {
    .titleRow {
      .rightSection {
        .resetButton {
          display: flex;
        }
      }
    }
  }

  &:hover {
    .titleRow {
      .rightSection {
        .resetButton {
          display: flex;
        }
      }
    }
  }

  &.collapse {
    .titleRow {
      .collapseBtn {
        transform: rotate(-180deg);
      }
    }

    .sectionList {
      height: 0;
      overflow: hidden;
    }
  }

  .titleRow {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--color-8);
    height: 24px;

    .collapseBtn {
      width: 16px;
      transition: transform 0.2s ease-in;
    }

    .leftSection {
      flex: 1 1 0;
    }
    .rightSection {
      flex: 0 0 auto;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      .resetButton {
        margin: 0 6px;
        display: none;
      }
    }
  }

  .sectionList {
    padding-top: 10px;
  }
}
